<template>
    <div id="app">
        <!-- 搜索框区域 -->
        <div class="first_top_box">
            <div class="first_top_box_ip">
                <span>杭州</span>
            </div>
            <div class="first_top_div">
                <div></div>
                <span>请输入商品名称</span>
            </div>
        </div>
        <!-- 轮播图 -->
        <div class="first_top_img">
            <swiper ref="mySwiper" :options="swiperOptions">
                <swiper-slide v-for="(item,index) in arr" :key="index"><img :src=[item.url] alt=""></swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
        </div>
    </div>
</template>

<script>

export default ({
    data() {
      return {
        swiperOptions: {
          pagination: {
            el: '.swiper-pagination',
            stopOnLastSlide: true
          },
          autoplay:{
              delay:1500
          },
          loop:true,
          speed: 500
        },
        arr:[], //存储轮播图数据
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.$swiper
      }
    },
    created(){
        this.axios({
            url:'https://www.fastmock.site/mock/91393c5db7383c20faa648f78962149b/ygsx/api/imgurl',
            methods:'GET'
        }).then(res=>{
            this.arr = res.data
        })
    }
})
</script>


<style scoped>
    .first_top_box{
        width: 100%;
        height: 1rem;
        background: linear-gradient(90deg,#39da85,#01b27a);
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
    .first_top_box_ip span{
        font-size: 13.8889px;
        color: #ffffff;
    }
    .first_top_div{
        width: 78%;
        height: 70%;
        background: #fff;
        border-radius: 1rem;
        display: flex;
        align-items: center;
        color: #999999;
    }
    .first_top_div div{
        margin-left: 5px;
        width: .56rem;
        height: .56rem;
        background: url(https://i.loli.net/2021/06/03/gpudDHW5wsFO2Ij.png) no-repeat center;
        background-size: 80% 80%;
    }
    .first_top_img{
        width: 100%;
        height: 217px;
    }
    .swiper-container{
        width: 100%;
        height: 217px;
    }
    img{
        width: 100%;
        height: 100%;
    }
</style>